<template>
	<view class="nft_container_bg">
		<view class="nft_container">
			<view class="blind_box_card"v-for="(item,index) in boxCardData":key="item.id">
				<view class="blind_box_btn">
					<u-button @click="open" text="开启盲盒" shape="circle" color="var(--echo-main-color)"></u-button>
				</view>
			</view>
			<u-popup round="20" bgColor="#555" :closeOnClickOverlay="false" :closeable="true" :show="show" mode="center" @close="close" @open="open">
			  <view class="open_blind_box">
			    <p>恭喜获得NFT</p>
					<img class="open_blind_box_img" width="100" :src="openNft.imgUrl">
			    <p>神秘NFT</p>
					<u-button @click="check(openNft.serialNo)" text="查看藏品" shape="circle" color="var(--echo-main-color)">
					</u-button>
			  </view>
			</u-popup>
		</view>
		<u-modal :showCancelButton="true" :show="loginShow" title="请先登录" content="您还没有登录,是否登录？" @confirm="toLogin" @cancel="loginShow=false"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginShow:false,
        show: false,
				openNft:{
					imgUrl:'../../static/img/nft/tou.png',
					serialNo:1284875681647596471,
					},
				boxCardData: [
					{
						id:1,
						imgUrl: '../../static/img/nft/tou.png',
						btnText: '投放盲盒'
					}
				]
			}
		},
		methods: {
		  open() {
				let token = uni.getStorageSync('setStorageSync')
				if(!token) {
					this.loginShow = true
					return
				}
			this.show = true
		  },
		  close() {
			this.show = false
		  },
		  check(serialNo){
				this.show = false
				uni.navigateTo({
					url: "/pages/my/myNft"
				})
				console.log('check')
			},
			toLogin(){
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}
		}
	}
</script>

<style lang="scss">
	.nft_container_bg {
		min-height: 100vh;
		background: $echo-nft-bg-color;
		.nft_container {
			padding: 30rpx 30rpx;
			.blind_box_card {
				border-radius: 10px;
				width: 50%;
				height: 300rpx;
				background-color: rgba(250, 250, 250, 0.1);
				position: relative;
				background-image: url(../../static/img/nft/tou.png);
				background-repeat: no-repeat;
				.blind_box_btn {
					position: absolute;
					transform: translate(-50%,-50%);
					top: 50%;
					left: 50%;
				}
			}
			.open_blind_box {
				padding: 80rpx;
				width: 500rpx;
				p {
					width: 100%;
					color: #fff;
					font-size: 14px;
					text-align: center;
					margin-bottom: 20px;
				}
				.open_blind_box_img {
					position: relative;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
</style>
